<template>
  <div ref="charts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.echarts();
  },
  methods: {
    echarts() {
      let line = echarts.init(this.$refs.charts);
      line.setOption({
        xAxis: {
          show: false,
          type: "category",
        },
        yAxis: {
          show: false,
        },
        series: {
          type: "line",
          data: [10, 22, 6, 47, 88, 23, 44, 122, 23, 76, 33, 67],

          // 拐点的样式
          itemStyle: {
            opacity: 0,
          },
           areaStyle:{
              color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "purple", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          smooth: true,
        },
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0,
        },
        tooltip: {},
      });
    },
  },
};
</script>

<style scoped>
div {
  width: 100%;
  height: 100%;
}
</style>
